<template>
  <van-popup :show="show" 
            @update:show="$emit('update:show', $event)"
            round 
            close-on-click-overlay 
            :style="{ width: '85%', maxHeight: '80%', overflow: 'auto', padding: '0px' }">
    <div class="popup-container">
      <div class="popup-header">
        <div class="popup-title">{{ t('masuk_title') }}</div>
        <van-icon name="cross" size="18" color="#aaa" @click="handleClose" />
      </div>
      
      <div class="header-divider"></div>
      
      <div class="rewards-grid">
        <div v-for="(reward, index) in rewards" :key="index" 
             class="reward-item" 
             :class="{ 'active': userLevel == reward.lever }">
          <div class="level-text">Level {{ reward.lever }}</div>
          <div class="reward-amount">COP{{ formatNumber(reward.checkInAmount) }}</div>
          <div v-if="userLevel == reward.lever" class="check-icon">
            <van-icon name="success" color="#ffff00" size="16" />
          </div>
        </div>
      </div>
      
      <div class="action-footer">
        <button class="masuk-button" @click="handleClaim">
          {{ t('profile_masuk') }}
        </button>
      </div>
    </div>
  </van-popup>
</template>

<script>
import { Icon as VanIcon, Popup as VanPopup, showToast } from 'vant/es'
import { vipdetail, todaySign } from '@/api/user'
import { formatNumber } from '@/utils/public'
import { useI18n } from 'vue-i18n'

export default {
  name: 'MasukPopup',
  components: {
    VanIcon,
    VanPopup
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    userLevel: {
      type: Number,
      default: 16
    }
  },
  data() {
    return {
      rewards: [],
      t:''
    }
  },
  computed: {
   
  },
  emits: ['update:show', 'claimed'],
  mounted() {
    const { t } = useI18n()
    this.t = t
    vipdetail().then((res) => {
      this.rewards = res.data
    }).catch((err) => {
      
    });
  },
  methods: {
    handleClose() {
      this.$emit('update:show', false)
    },
    handleClaim() {
      todaySign().then((res) => {
        showToast(res.msg)
        this.$emit('claimed')
      }).catch((err) => {
        
      });
     
      this.handleClose()
    },
    formatNumber(num) {
      return formatNumber(num)
    }
  }
}
</script>

<style scoped lang="less">
// 弹窗样式
.popup-container {
  color: #fff;
  background-color: #222;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  padding: 0 10px 25px 10px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 5px;
  
  .popup-title {
    font-size: 16px;
    font-weight: bold;
    color: #f6eade;
    flex: 1;
    text-align: center;
    padding-left: 20px; // 为了抵消右侧关闭按钮的宽度，保持文字居中
  }
}

.header-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  width: 100%;
  margin-bottom: 15px;
}

.rewards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
  margin-bottom: 20px;
}

.reward-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 5px;
  border-radius: 4px;
  background-color: #33302f;
  position: relative;
  height: 20px;
  
  &.active {
    .level-text{color: #ffff00!important;}
    .reward-amount{color: #ffff00!important;}
  }
  .level-text {
    font-size: 13px;
    color: #fff;
  }
  
  .reward-amount {
    font-size: 13px;
    color: #d4a353;
    font-weight: bold;
    margin-right: 18px;
  }
  
  .check-icon {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.action-footer {
  margin-top: auto;
  padding-top: 15px;
}

.masuk-button {
  width: 90%;
  height: 38px;
  background: linear-gradient(270deg,#fee5cf,#dfb695 50%,#fee5cf);
  border: 1px solid transparent;
  border-radius: 20px;
  font-size: 16px;
  color: #221a18;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: block;
  margin: 0 auto;
  &:active {
    opacity: 0.9;
  }
}
</style> 